<template>
  <div>
    <Tips />
    <!-- 产品列表 -->
    <van-checkbox-group v-model="result">
      <van-checkbox name="a">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
      </van-checkbox>
      <van-checkbox name="b">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
      </van-checkbox>
    </van-checkbox-group>

    <!-- 提交订单栏 -->
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll">全选</van-checkbox>
      <template #tip>
        累计共42件商品，可点击
        <van-button type="primary" size="small">编辑</van-button>
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from "@/components/Tips.vue";
import Vue from "vue";
export default {
  components: {
    Tips,
  },
  data() {
    return {
      result: ["a", "b"],
      // 全选复选框的值
      checkedAll: false,
    };
  },
  methods: {
    onSubmit() {},
  },
  // 组件内部的导航守卫
  // 只会在cart组件中执行
  // 这样写比全局的写法更好,不易每次跳转路由都去进行判断
  beforeRouteEnter(to, from, next) {
    // 判断有没有登录
    // 如果没有登录，跳转到 /user 页面
    let token = localStorage.getItem("token");
    if (token) {
      next();
    } else {
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建
      Vue.prototype.$toast("请先登录!");
      // 拿不到token,说明没有登录,跳转到"我的" /user
      setTimeout(() => {
        next("/user");
      }, 800);
    }
  },
};
</script>
 
<style lang = "less" scoped>
.van-checkbox-group {
  padding: 0.1rem;
  background-color: #fff;

  /deep/.van-checkbox__label {
    flex: 1;
  }
}
.van-submit-bar {
  bottom: 0.5rem;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
  .van-button {
    margin: 0 0.08rem;
  }
}
</style>